<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<{ avatar: string; selectedKey: string }>();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const emits = defineEmits(['select', 'close']);
const frames = [
  { key: 'rainbow', label: '彩虹渐变' },
  { key: 'gold', label: '金色高光' },
  { key: 'neon', label: '霓虹蓝光' },
  { key: 'dream', label: '粉紫梦幻' },
  { key: 'white', label: '简约白描' },
  { key: 'pixel', label: '像素风' }
];
</script>

<template>
  <div class="frame-selector-modal">
    <div class="frame-selector-title">选择你的头像框</div>
    <div class="frame-list">
      <div
        v-for="frame in frames"
        :key="frame.key"
        class="frame-item"
        :class="[{ selected: selectedKey === frame.key }]"
        @click="$emit('select', frame.key)"
      >
        <div class="avatar-frame-preview" :class="frame.key">
          <img :src="avatar" alt="avatar" class="avatar-img" />
        </div>
        <div class="frame-label">{{ frame.label }}</div>
      </div>
    </div>
    <div class="frame-selector-footer">
      <NButton @click="$emit('close')">取消</NButton>
    </div>
  </div>
</template>

<style scoped>
.frame-selector-modal {
  width: 420px;
  background: linear-gradient(135deg, #fff 80%, #f5f7fa 100%);
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(102, 126, 234, 0.18);
  padding: 24px 24px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.frame-selector-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #333;
}
.frame-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  margin-bottom: 18px;
}
.frame-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  border-radius: 50%;
  padding: 4px 8px;
}
.frame-item.selected {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px #667eea99;
}
.avatar-frame-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #fff;
}
.avatar-img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
}
/* 头像框样式 */
.avatar-frame-preview.rainbow {
  border: 4px solid;
  border-image: linear-gradient(135deg, #ff6b6b, #fbc531, #4cd137, #00a8ff, #9c88ff, #e17055) 1;
}
.avatar-frame-preview.gold {
  border: 4px solid #ffd700;
  box-shadow: 0 0 12px 2px #ffd70088;
}
.avatar-frame-preview.neon {
  border: 4px solid #00c3ff;
  box-shadow: 0 0 16px 2px #00c3ffcc;
}
.avatar-frame-preview.dream {
  border: 4px solid;
  border-image: linear-gradient(135deg, #f093fb, #f5576c, #a18cd1, #fbc2eb) 1;
  box-shadow: 0 0 12px 2px #f093fb55;
}
.avatar-frame-preview.white {
  border: 4px solid #fff;
  box-shadow: 0 0 8px 1px #e0e7ef;
}
.avatar-frame-preview.pixel {
  border: 4px dashed #333;
  background: repeating-linear-gradient(45deg, #fff, #fff 4px, #eee 4px, #eee 8px);
}
.frame-label {
  font-size: 13px;
  color: #666;
  margin-top: 2px;
}
.frame-selector-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
</style>
